<template>
  <div class="content">
    <div class="content-block">
      <Navigation
          :navigation-list="[{id:1,value:'首页',url:'/home/Index'},{id:3,value:'我的参会岗位',url:''}]"></Navigation>
      <div class="position-block">
        <div class="block-title">
          <div class="line"></div>
          <div class="title-item">
            <div class="title">参会职位</div>
          </div>
        </div>
      </div>
      <template v-if="position.length>0">
        <div class="position-block block" v-loading="positionLoading">
          <router-link :to="{name:'positionDetail',query:{id:item.id}}" v-for="item in position" :key="item.id" class="position-item">
            <div class="name-block">
              <div class="name">{{item.jobTitle}}</div>
              <div class="wage">{{item.minSalary}}-{{item.maxSalary}}元</div>
            </div>
            <div class="other">{{item.expRequireText}}&nbsp;/&nbsp;{{item.minEducationText}}</div>
            <div class="label-block">
              <div class="label-item">{{item.jobAddress}}</div>
            </div>
          </router-link>
        </div>
      </template>
      <el-empty v-else ></el-empty>
      <div v-if="position.length>0 && count>limit" style="display: flex; justify-content: center;align-content: flex-end;">
        <el-pagination
            background
            :page-size="limit"
            layout="prev, pager, next"
            :total="count"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" >
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import {getEnterpriseDetailsApi} from "@/api/jobFair";
import Navigation from "@/components/Navigation/Navigation";

export default {
  name: "getLookMe",
  components: { Navigation},
  data() {
    return {
      positionLoading:false,
      position:[],
      page: 1,
      limit : 10,
      count : 0
    }

  },
  methods: {
    getEnterpriseDetails(){
      this.positionLoading=true
      this.imgListLoading=true
      getEnterpriseDetailsApi({sId:this.id,cId:this.cid}).then((res)=>{
        this.position=res.jobPublishList
      }).finally(()=>{
        this.positionLoading=false
        this.imgListLoading=false
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getEnterpriseDetails()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getEnterpriseDetails()
    },
  },
  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getEnterpriseDetails();
  }
}
</script>

<style lang="scss" scoped>
.content{
  width: $contentWidth;
  margin: 0 auto;
  min-height: $fullMinHeight;
  .content-block{
    padding: 30px;
    .block-title {
      width:$contentWidth;
      height: 70px;
      display: flex;
      flex-direction: row;
      align-items: center;
      //padding: 0 30px;
      border-radius: 5px;

      .line {
        height: 23px;
        width: 10px;
        background: $red;
        border-radius: 20px;
        margin-right: 10px;
      }

      .title-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .title {
          font-weight: bold;
          font-size: 20px;
          color: $orange;
        }
        .more{
          color: $orange;
          font-size: 14px;
        }
      }
    }
    .position-block{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .position-item{
        width: calc((100% - 40px)/3);
        margin-right: 20px;
        background: #fff;
        border-radius: 10px;
        padding:15px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        .name-block{
          font-size: 20px;
          font-weight: bold;
          display: flex;
          flex-direction: row;
          align-items: center;
          .name{
            flex-grow: 1;
          }
          .wage{
            flex-grow: 0;
            color: $orange;
            font-size: 17px;
          }
        }
        .other{
          color: $darkGray;
          font-size: 14px;
          margin-top: 10px;
        }
        .label-block{
          margin-top: 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          width: 100%;
          .label-item{
            margin-right: 8px;
            margin-bottom: 8px;
            border-radius: 4px;
            font-size: 14px;
            color:$darkGray;
            //background: $lightGray;
          }
        }
      }
      .position-item:nth-child(3n){
        margin-right: 0;
      }
    }
  }
}

</style>
